import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import CTopbar from '../../../components/CTopBar/index'
import CorderCard from '../../../components/CorderCard/index'
import { get_my_order_api } from './service'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import './index.scss'
import { pay_api } from '@/pages/Pay/service'

/**
 * 我的订单
 */
class MyOrder extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      pageSize: 20,
      pageNum: 1,
      current: 0,
      Data: [],
    }
  }

  componentDidMount() {
    const tabType = Number(Current.router?.params.tabType || 0)
    this.setState(
      {
        current: tabType,
      },
      () => {
        this.get_order_data()
      },
    )
  }

  // 获取数据
  async get_order_data() {
    const { current, Data, pageSize, pageNum } = this.state
    const params = {
      type: current,
      pageSize,
      pageNum,
    }
    await get_my_order_api(params).then(({ result, data }) => {
      const arr = Array.from(data.list)
      this.setState({
        Data: Data.concat(...arr),
      })
    })
  }

  handleClick(value) {
    this.setState(
      {
        Data: [],
        pageNum: 1,
        current: value,
      },
      () => {
        this.get_order_data()
      },
    )
  }

  onReachBottom() {
    const { pageNum } = this.state
    this.setState(
      {
        pageNum: pageNum + 1,
      },
      () => {
        this.get_order_data()
      },
    )
  }

  // 去支付
  async goPay(orderId) {
    console.log('2222222', orderId)

    await pay_api(orderId).then(({ result, data, message }) => {
      if (result === 1999) {
        Taro.requestPayment({
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: (res) => {
            Taro.showToast({
              title: '支付成功！',
            })
            this.get_order_data()
          },
          fail: function (res) {
            Taro.showToast({
              icon: 'none',
              title: '您取消了支付!',
            })
          },
        })
      } else {
        Taro.showToast({
          title: message,
          icon: 'none',
        })
        this.get_order_data()
      }
    })
  }

  render() {
    const { current, Data } = this.state
    const tabList = [{ title: '未支付' }, { title: '已支付' }]
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的订单' showBack></CTopbar>
        </View>
        <View className='content_3'>
          <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
            {tabList.map((c, i) => {
              return (
                <AtTabsPane current={current} index={i} key={i}>
                  <View style='background-color: #FAFBFC;text-align: center; padding-top:20px'>
                    {Data.length === 0 ? (
                      <View style='color:#8c8c8c'>暂无数据...</View>
                    ) : (
                      Data.map((item, index) => {
                        return (
                          <View key={index}>
                            <CorderCard key={index} data={item} tabstatus={i} type={3} goPay={this.goPay.bind(this, item.orderId)} />
                          </View>
                        )
                      })
                    )}
                  </View>
                </AtTabsPane>
              )
            })}
          </AtTabs>
        </View>
      </View>
    )
  }
}
export default MyOrder
